import React, { useEffect, useState } from 'react'
import { Table, Input, Breadcrumb, Button,message } from 'antd';
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons/lib/icons';
import { IInterViewShield, ISkillLabel, ISkillList, ISkillListQuery } from '@/utils';
import { getDeleteItem, getShieldList, gitInterView, gitInterviewManage } from '@/services';
import { history, Link } from 'umi'

import stylesInterviewManage from './interviewManage.less'

const interviewManage: React.FC = (props) => {
    
    const columns = [
        {
            title: '岗位名称',
            align: "center",
            render: (rows: ISkillList) => {
                return <span style={{ color: 'rgb(65, 157, 233)' }} onClick={() => { history.push({ pathname: '/student/interView/interviewRecord', query: { id: rows.interviewId } }) }}>{rows.stationName}</span>
            }
        },
        {
            title: '公司名称',
            dataIndex: 'companyName',
            align: "center"
        },
        {
            title: '面试时间',
            dataIndex: 'interviewTime',
            align: "center"
        },
        {
            title: '面试官',
            dataIndex: 'intervierManagement',
            align: "center"
        },
        {
            title: '专业',
            dataIndex: 'majorName',
            align: "center"
        },
        {
            title: '提交人',
            dataIndex: 'commitName',
            align: "center"
        },
        {
            title: '面试结果',
            dataIndex: 'status',
            align: "center",
            render: (status: ISkillList) => {
                if (Number(status) == 0) {
                    return <span>不确定</span>
                } else if (Number(status) == 1) {
                    return <span style={{ color: "#29cb97" }}>通过</span>
                } else if (Number(status) == 2) {
                    return <span style={{ color: "red" }}>未通过</span>
                }
            }
        },
        {
            title: '录音文件',
            dataIndex: 'issoundrecord',
            align: "center",
            render: (issoundrecord: ISkillList) => {
                if (Number(issoundrecord) == 0) {
                    return <span>无</span>
                } else if (Number(issoundrecord) == 1) {
                    return <span>有</span>
                }
            }
        },
        {
            title: '屏蔽',
            align: "center",
            render: (rows: ISkillList) => {
                if (rows.status == 0) {
                    return <span>屏蔽</span>
                } else if (rows.status == 1 || rows.status == 2) {
                    return <span>正常</span>
                }
            }
    
        },
        {
            title: '操作',
            align: "center",
            render: (row: ISkillList) => {
                return <DeleteOutlined
                    onClick={() => { fun(row.interviewId) }}
                    style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
            }
        }
    
    ];
    
    function fun(id: string) {
        const path = `/sypt/interview/deleteInterviewById/${id}`
        getDeleteItem(path).then(ok => { 
            if(ok.code==200){
                message.success('删除成功')
                const path = '/sypt/interview/myInterviewList'
    
                gitInterView(path, queryParams).then(ok => {
                    setSkillList(ok.rows)
                })
            }
         })
    }
    let [queryParams, setQueryParams] = useState<ISkillListQuery>({ isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10 } as ISkillListQuery)
    let [skillList, setSkillList] = useState<ISkillList[]>()
    let [isMyInfo, setMyInfo] = useState(false);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [shield, setShield] = useState<IInterViewShield>()


    useEffect(() => {
        const path = '/sypt/interview/myInterviewList'

        gitInterView(path, queryParams).then(ok => {
            setSkillList(ok.rows)
        })
    }, [])

    // 列表
    useEffect(() => {
        queryParams = { ...queryParams, isMyInfo, searchTitle: title }

        if (isMyInfo) {
            setSkillList(skillList?.filter(item => item.status == 1 || item.status == 2))
        } else {
            const path = '/sypt/interview/myInterviewList'
            gitInterView(path, queryParams).then(ok => {
                console.log(ok)
                setSkillList(ok.rows)
            })

        }
    }, [isMyInfo, searchTitle, shield])

    return <div className={stylesInterviewManage.postSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>面试</Breadcrumb.Item>
            <Breadcrumb.Item>面试记录管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className={stylesInterviewManage.main}>
            <div className={stylesInterviewManage.nav}>
                <div></div>
                <span> <input type="checkbox" checked={isMyInfo} onChange={e => { setMyInfo(e.target.checked) }} />仅查看正常</span>
                <span className={stylesInterviewManage.spans}> <Input placeholder="搜索岗位,公司名称" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} /></span>
                <Link to='/student/interView/addInterView'>
                    <Button
                        type="primary"
                        style={{ margin: "15px 30px 15px 15px", width: "100px", fontSize: "15px", height: "35px", lineHeight: "35px", textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}>+添加面试记录</Button>
                </Link>
            </div>

            <Table style={{ width: "95%", margin: "0 auto", textAlign: "center" }} rowKey='interviewId' dataSource={skillList as ISkillList[]} columns={columns as any} />
        </div></div>
}

export default interviewManage